<template>
    <div class="count">
        <h2>当前求和为：{{ sum }}</h2>
        <select v-model.number="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="sub">减</button>
    </div>
</template>

<script setup lang="ts" name="Count">
    //引入
    import { ref } from 'vue'
    //引用：storeToRefs只会ref包裹数据，而toRefs则会将所有数据与方法全部使用ref包裹
    import {useCountStore} from '@/store/count'
    import { storeToRefs } from 'pinia'

    const countStore = useCountStore()//countStore为reactive值，其中存储的 sum 为ref值，当ref被reactive包裹时，会进行的自动解包（此时无需使用value）
    const {sum} = storeToRefs(countStore)


    //数据
    let n = ref(1)//用户选择的数字

    //方法
    function add() {
        //修改数据：方法一：countStore.sum++
        //修改数据：方法二：countStore.$patch('sum',countStore.sum+1)
        //有大量数据需要一次性修改时，建议使用方法二，只进行一次批量修改，而方法一会进行大量数据修改，会触发大量视图更新，效率较低
        //修改数据：方法三：可以在方法中做一些极限值的判断，方便维护、复用
        countStore.increment(n.value)
    }
    function sub() {
        
    }
</script>


<style scoped>
    .count{
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    select,button{ 
        margin: 0 5px;
        height: 25px;
    }
</style>